<template>
  <el-card class="mb-5">
    <div class="flex justify-between items-center" slot="header">
      <SelectTime
        @handleChange="handleChange"
        @handleDate="handleDate"
      ></SelectTime>
      <div class="flex flex-col items-center">
        <div class="text-xl font-bold">
          <slot name="title"></slot>
        </div>
        <div class="text-sm font-normal text-gray-500">
          <slot name="remark"></slot>
        </div>
      </div>
    </div>
    <div
      id="user_chart"
      class="w-full "
      style="height:400px"
      ref="user_chart"
    ></div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

import SelectTime from "../selectTime/selectTime";

import { getUserLineFlowData } from "@/api/dataPanel/userStatistic";

export default {
  name: "",
  data() {
    return {
      form: {
        date_tag: -1,
        start_date: "",
        end_date: ""
      },
      option: {
        tooltip: {
          trigger: "axis"
        },
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        legend: {
          data: ["房间礼物流水", "盲盒", "许愿流星", "抢糖果", "霍克城堡"]
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "50px",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [1, 2, 3]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "房间礼物流水",
            type: "line",
            data: [100, 22, 333]
          },
          {
            name: "盲盒",
            type: "line",
            data: [22, 111, 333]
          },
          {
            name: "许愿流星",
            type: "line",
            data: [22, 111, 333]
          },
          {
            name: "抢糖果",
            type: "line",
            data: [22, 111, 333]
          },
          {
            name: "霍克城堡",
            type: "line",
            data: [22, 111, 333]
          }
        ]
      }
    };
  },
  components: {
    SelectTime
  },
  computed: {
    user_chart() {
      return echarts.init(this.$refs["user_chart"]);
    }
  },
  created() {
    this.handleGetData();
  },
  mounted() {
    let that = this;
    this.drawline();
    window.addEventListener("resize", () => {
      that.user_chart.resize();
    });
  },
  methods: {
    async handleGetData() {
      const { data } = await getUserLineFlowData(this.form);

      let xAxis = [];
      let yAxis_room_gift = [];
      let yAxis_blind_box = [];
      let yAxis_lucky_tree = [];
      let yAxis_scramble_sugar = [];
      let yAxis_huoke = [];
      data.forEach(item => {
        xAxis.push(`${item.date} ${item.start_hour}:00-${item.end_hour}:00`);
        yAxis_room_gift.push(item.room_gift_serial);
        yAxis_blind_box.push(item.blind_box_serial);
        yAxis_lucky_tree.push(item.lucky_tree_serial);
        yAxis_scramble_sugar.push(item.scramble_sugar_serial);
        yAxis_huoke.push(item.huoke_serial);
      });
      this.user_chart.setOption({
        xAxis: { data: xAxis },
        series: [
          { data: yAxis_room_gift },
          { data: yAxis_blind_box },
          { data: yAxis_lucky_tree },
          { data: yAxis_scramble_sugar },
          { data: yAxis_huoke }
        ]
      });
    },
    handleChange(value) {
      this.form = value;
      this.handleGetData();
    },
    handleDate(value) {
      this.form = value;
      this.handleGetData();
    },
    drawline() {
      this.user_chart.setOption(this.option);
    }
  }
};
</script>
<style lang="scss" scoped></style>
